<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
    <script>
        window.onload=function(){
            //声明全局组件
            Vue.component('myfooter',{//子组件
                data(){
                    return {
                        substr:'myfooter'

                    }
                },
                methods:{
                    send(){
                        this.$emit('accept','send','send1',this.substr)
                    }
                },
                props:['msg','str','num'],//子组件想要从父组件中接收的属性
                template:`
                    <div>
                        <p v-on:click='send'>click--send</p>
                        <p>hello--- {{msg}}---</p>
                        <p>{{str}}</p>
                        <p>{{num}}</p>
                    </div>
                `
            })
            //实例对象
            var myheader={//父组件
                data(){
                    return {
                        num:0,
                        substr:''
                    }
                },
                methods:{
                    handler(){
                        this.num++
                    },
                    accept(data,data1,data2){
                        this.substr=data
                        console.log(data,data1,data2);//send

                    }
                },
                template:`
                    <div>
                        <p>{{substr}}</p>
                        <p>哇哈哈哈--- {{num}}</p>
                        <p>第二个哇哈哈哈---</p>
                        <myfooter v-on:accept='accept' msg='hello这是父给子的内容' str='my' :num='num'></myfooter>
                        <button v-on:click='handler'>点击这里</button>
                    </div>
                `
            }
            var app=new Vue({
                el:'#app',
                data:{

                },
                methods:{
                    
                },
                components:{
                    'myheader':myheader,
                }
            })
        }
    </script>
</head>
<body>
    <div id="app">
        <myheader></myheader>
    </div>
</body>
</html>
